<template>
    <div class="blog-list-container" ref="container" @scroll="handleScroll">
        <ul >
            <li v-for="item in blogPageObj?.rows" :key="item.id">
                <div class="thumb" v-if="item.thumb">
                    <RouterLink :to="{
                        name:'blogDetail',
                        params:{
                            id:item.id
                        }
                    }" >
                        <img v-load-image-lazy="item.thumb" :alt="item.title" :title="item.title" />
                    </RouterLink>
                </div>
                <div class="main">
                    <RouterLink :to="{
                        name:'blogDetail',
                        params:{
                            id:item.id
                        }
                    }" >
                        <h2>{{ item.title }}</h2>
                    </RouterLink>
                    <div class="aside">
                        <span>日期: {{formatDate(item.createDate)}}</span>
                        <span>浏览: {{ item.scanNumber }}</span>
                        <span>评论: {{ item.commentNumber }}</span>
                        <RouterLink :to="{
                            name:'categoryBlog',
                            params:{
                                categoryId:item.category.id
                            }
                            }" >
                            {{ item.category.name }}
                        </RouterLink>
                    </div>
                    <div class="desc">
                        {{ item.description }}
                    </div>
                </div>
               
            </li>
        </ul>
        <Empty v-if="!blogPageObj || blogPageObj.total===0 " :size="80"></Empty>
        <Pager 
            v-if="blogPageObj?.total"
            :pagerInfo="props.pagerInfo"
            @PageChange="handlePageChange"
        />

    </div>
</template>
<script setup lang='ts'>
import Pager from '~@/components/Pager/index.vue'
import { formatDate } from '~@/untils/NslUtils';
import { PropType, ref, watch} from 'vue';
import { TypeApiBlogPageI } from '~@/api/apiTypes';
import { InterfacePagerI } from '~@/components/Pager/pagerType';
import { $bus, bindSetScrollEvent } from '~@/bus/busIndex';
import { vLoadImageLazy } from '~@/directives/imagelazy/imageLazy';
import Empty from '~@/components/Empty/index.vue'

    //#region defineXxx
    defineOptions({
        name:'BlogList'
    });

    const props=defineProps({
        blogPageObj:{
            type:Object as PropType<TypeApiBlogPageI>,
            default:{}
        },
        pagerInfo:{
            type:Object as PropType<InterfacePagerI>,
            required:true
        },
    });



    const emit = defineEmits<{
        pageChange:[newNumber:number],
    }>();
    //#endregion

const container=ref<HTMLDivElement>();

function scrollTop(){
    if(container.value){
        container.value.scrollTop=0;
    }
}

defineExpose({
    scrollTop
});

const handleScroll=()=>{
    $bus.emit('mainScroll',container.value);
}

const handleSetMainScroll=(scrollTop:number)=>{
    if(container.value){
        container.value.scrollTop=scrollTop
    }
}

bindSetScrollEvent(handleSetMainScroll);


const handlePageChange=(newPage:number)=>{
    emit('pageChange',newPage);
}
</script>
<style lang='less' scoped>
.blog-list-container{
    line-height: 1.7em;
    position: relative;
    padding: 20px;
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    scroll-behavior: smooth;
    ul{
        list-style: none;
        margin: 0;
        padding: 0;
        li{
            display: flex;
            padding: 15px 0;   
            border-bottom: 1px solid @gray;
            .thumb{
                flex:0 0 auto;
                margin-right: 15px;
                img{
                    display: block;
                    max-width: 200px;
                    border-radius: 5px;
                }
            }
            .main{
                flex:1 1 auto;
                h2{
                    margin: 0;
                }
                .aside{
                    font-size: 12px;
                    color:@gray;
                    span {
                        margin-right: 15px;
                    }
                }
                .desc{
                    margin: 15px 0;
                    font-size: 14px;
                }
            }
        }

    }
    }
    
</style>